<template>
  <div id="about-edit">
    <mavon-editor ref="md" v-model="content" @imgAdd="addImg" @imgDel="delImg"/>
    <el-button @click="submitClick(content)">提交</el-button>
    <el-button @click="cancelClick()">取消</el-button>
  </div>
</template>

<script>
import {getAbout, editAbout, addFile, deleteFile} from "@/network/fileRequest";

export default {
  name: "AboutEdit",
  data() {
    return {
      content: ""
    }
  },
  methods: {
    getAbout() {
      getAbout().then(res => {
        this.content = res.data;
      })
    },
    editAbout(content) {
      editAbout(content).then(res => {
        this.$router.replace("/user/about");
      })
    },
    submitClick(content) {
      this.editAbout(content);
    },
    cancelClick() {
      this.content = "";
      this.$router.replace("/user/about");
    },
    addImg(filename, file) {
      const img = new FormData();
      img.append("file", file);
      let message = JSON.stringify(-1);
      addFile(message, img).then(res => {
        this.$refs.md.$img2Url(filename, res.data)
      })
    },
    delImg(fileName) {
      const message = JSON.stringify(-1);
      deleteFile(message, fileName[0]);
    }
  },
  created() {
    this.getAbout();
  }

}
</script>

<style scoped>
  #about-edit {
    position: absolute;
    left: 20%;
    width: 60%;
    text-align: center;
    background: gainsboro;
  }
</style>